<template>
  <view class="list-container">
    <customtop :top_title="title"></customtop>
    <view class="list-content">
      <view class="title">
        <view class="name">帖子列表</view>
        <view class="navbar">
          <template v-for="(item, index) in navbarList">
            <view
              class="item-text"
              @click="activeClick(index, item)"
              :class="{ active: currentIndex === index }"
            >
              {{ item.name }}</view
            >
          </template>
        </view>
      </view>
      <view class="list">
        <template v-for="(item, index) in list">
          <globalItem :item="item" @getDetail="getDetail"></globalItem>
        </template>
      </view>
    </view>
  </view>
</template>

<script>
import globalItem from "@/components/item/index";
import customtop from "@/components/customtop.vue";
import { request } from "@/utils/http.js";
export default {
  components: { globalItem, customtop },
  data() {
    return {
      navigatorTitleList: [
        "",
        "分销代理",
        "招商加盟",
        "异业合作",
        "找单求助",
        "创业合伙",
        "其他",
      ],
      title: "",
      currentIndex: 0,

      navbarList: [
        {
          name: "推荐",
          px: 1,
        },

        {
          name: "最新发布",
          px: 2,
        },
      ],
      list: [],
      params: {
        page_size: 15,
        page: 1,
        px: 1,
      },
      id: "",
    };
  },
  onLoad(options) {
    this.title = this.navigatorTitleList[options.type];
    this.id = options.id;
    this.getList();
  },
  onReachBottom() {
    this.params.page++;
    this.getList(true);
    console.log("触底");
  },
  methods: {
    getDetail(item) {
      const { id } = item;
      this.$u.route("/pages/postList/detail", {
        id,
      });
    },
    activeClick(i, item) {
      this.currentIndex = i;
      this.params.px = item.px;
      this.getList();
    },
    getList(isReachBottom) {
      request
        .post("/xiangmushe/getCategoryAllList", {
          category_id: this.id,
          ...this.params,
        })
        .then(({ data }) => {
          if (data.data.length > 0 && this.params.page <= data.last_page) {
            if (isReachBottom) {
              this.list = this.list.concat(data.data);
            } else {
              this.list = data.data;
            }
          } else if (this.params.page >= 1) {
            this.params.page--;
          }
        });
    },
  },
};
</script>

<style lang="scss" scoped>
page {
  background-color: #fff;
}
.active {
  color: #549cd6;
  position: relative;
  &::after {
    content: " ";
    position: absolute;

    width: 30rpx;
    height: 2rpx;
    background-color: #549cd6;
    bottom: 0;
    // top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
.list-content {
  .title {
    display: flex;
    justify-content: space-between;
    padding: 15rpx 15rpx;
    box-sizing: border-box;
    .name {
      font-size: 28rpx;
    }
    .navbar {
      display: flex;
      font-size: 26rpx;
      color: #999;
      .item-text {
        margin-right: 20rpx;
      }
    }
  }
}
</style>
